<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      title="我的足迹"
      right-text="编辑"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #right>
        {{ aaa[num] }}
      </template>
    </van-nav-bar>

    <div class="goods_render">
      <div class="showcheck">
        <p>
          <van-checkbox v-model="checked" v-if="isCheckShow" /><span>今天</span>
        </p>
        <cardCheck :pocketList="pocketList" v-if="isCheckShow"></cardCheck>
        <Card :pocketList="pocketList" v-else></Card>
      </div>
      <div class="showcheck">
        <p>
          <van-checkbox v-model="checked" v-if="isCheckShow" /><span>昨天</span>
        </p>
        <cardCheck :pocketList="pocketList" v-if="isCheckShow"></cardCheck>
        <Card :pocketList="pocketList" v-else></Card>
      </div>
      <div class="showcheck">
        <p>
          <van-checkbox v-model="checked" v-if="isCheckShow" /><span
            >2017-05-01</span
          >
        </p>
        <cardCheck :pocketList="pocketList" v-if="isCheckShow"></cardCheck>
        <Card :pocketList="pocketList" v-else></Card>
      </div>
    </div>

    <Loading></Loading>
  </div>
</template>

<script>
import Card from "@/components/card.vue";
import cardCheck from "@/components/cardCheck.vue";
import Loading from "@/components/bottom_loading";
export default {
  name: "LianxiMyFootprint",

  data() {
    return {
      pocketList: this.$store.state.list,
      isCheckShow: false,
      checked: false,
      aaa: ["编辑", "完成"],
      num: 0,
    };
  },
  components: {
    Card,
    Loading,
    cardCheck,
  },
  mounted() {},

  methods: {
    // 返回上一级
    onClickLeft() {
      this.$router.back(-1);
    },
    // 编辑
    onClickRight() {
      if (this.num == 0) {
        this.isCheckShow = true;
        this.num = 1;
      } else {
        this.num = 0;
        this.isCheckShow = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: #f9f9f9;
  // 标题颜色
  /deep/ .van-nav-bar__title {
    color: #a3998d;
  }
  // 左箭头颜色
  /deep/.van-icon {
    color: #67d0bb;
  }
  // 编辑颜色
  /deep/ .van-nav-bar__text {
    color: #3cc4aa;
  }
}
.goods_render {
  p {
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
    font-size: 14px;
    color: #999a9d;
  }
}
.showcheck > p {
  display: flex;
  padding: 0 15px;
  span {
    margin-left: 15px;
  }
}
</style>